<template>
	<view class="login-container">
		<view class="header">
			<img class="header-pic" src="/static/login-header.jpg" alt="" />
		</view>

		<view class="login-area">
			<input v-model="account" autocomplete="new-password" placeholder="请输入账号" />
			<input v-model="password" autocomplete="new-password" password="true" placeholder="请输入密码" />

			<view class="submit" @click="login">
				登
				&nbsp;&nbsp;&nbsp;&nbsp;
				录
			</view>
		</view>
	</view>

</template>

<script>
	import login from "@/api/login.js";
	import debounce from "@/utils/debounce.js";

	export default {
		data() {
			return {
				account: "",
				password: ""
			};
		},

		onLoad: async function() {
			// 监听键盘按下事件
			document.addEventListener('keypress', async (event) => {
				// 检查按下的键是否为回车键
				if (event.key === 'Enter') {
					event.preventDefault();
					await this.login();
				}
			});
		},

		methods: {
			async login() {
				// 判空
				if (!this.account.trim() || !this.password.trim()) {
					uni.showToast({
						title: "请填写账号密码",
						icon: "error",
						duration: 2000
					});
					return false;
				}

				const result = await login(this.account, this.password);
				console.log("login result: ", result);
				if (result.code === 200) {
					const token = result.data.token;
					const userDto = result.data.userRespDto;
					const userInfo = {
						id: userDto.id,
						account: userDto.account,
						name: userDto.name,
						userType: userDto.userRight,
						avatarUrl: userDto.avatarUrl,
						tel: userDto.tel,
						password: userDto.password,
					};
					if (userInfo.userType === 2) {
						userInfo.userTitle = "高级管理员";
					} else if (userInfo.userType === 1) {
						userInfo.userTitle = "中级管理员";
					} else {
						userInfo.userTitle = "初级管理员";
					}
					uni.setStorageSync('userInfo', JSON.stringify(userInfo));
					uni.setStorageSync('token', token);
					uni.setStorageSync('showFlashScreen', false);
					uni.setStorageSync('hasLoggedin', true);
					uni.redirectTo({
						url: '/pages/index/index'
					});
				} else {
					uni.showToast({
						title: "账号或密码错误",
						icon: "error",
						duration: 2000
					})
					return false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		position: relative;
		height: 100vh;
		background-color: #FFF;
	}

	.header {
		width: 100%;
	}

	.header-pic {
		width: 100%;
		height: 42vh;
		object-fit: contain;
	}

	.login-area {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	input {
		margin-bottom: 24px;
		padding: 0 12px;
		width: 280px;
		height: 48px;
		border-radius: 8px;
		// border-bottom: 1px solid #BBB;
	}

	input:hover {
		animation: fadeIn 0.5s ease forwards;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			border: none;
		}

		to {
			opacity: 1;
			border: 2px solid #D20000;
			box-shadow: 0 0 8px rgba(189, 49, 36, 0.3);
		}
	}

	.submit {
		margin-top: 48px;
		width: 300px;
		height: 48px;
		border-radius: 24px;
		// background-image: linear-gradient(to bottom right, #F4CE98, #FFFBC7, #FBB03B, #EDD181, #FFFBC7); // 渐变
		background-color: #D20000;
		box-shadow: 0 0 8px rgba(189, 49, 36, 0.3);
		text-align: center;
		line-height: 48px;
		font-size: 20px;
		font-weight: 700;
		color: #FFF;
		text-shadow: 0 1px 2px #A16222;
	}
</style>